<template>
  <div class="card">
    <div class="top">
      <div class="top_left">
        <div class="code">订单编号：{{ state.order_no }}</div>
        <el-icon class="copy" @click="onCopy"><DocumentCopy /></el-icon>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_left">
        <img class="avatar" :src="state.cust_info.avatar" alt="" />
        <div class="user">
          <div class="name_box">
            <el-tooltip v-if="state.cust_info.name?.length > 11" effect="dark" :content="state.cust_info.name" placement="top-start">
              <div class="name">{{ state.cust_info.name }}</div>
            </el-tooltip>
            <div v-else class="name">{{ state.cust_info.name }}</div>
            <el-icon v-if="state.cust_info?.sex == 1" class="men"><Male /></el-icon>
            <el-icon v-else-if="state.cust_info?.sex == 2" class="women"><Female /></el-icon>
            <img v-else src="/src/assets/image/customer/sex_0.png" alt="" />
          </div>
          <div class="mobile">
            <span>{{ state.cust_info.mobile }} </span>
            <img v-if="state.cust_weiwork === 1" class="weixin" src="@/assets/icon/qiyeweixin-icon.png" alt="" />
            <img v-if="state.cust_wechat === 1" class="weixin" src="@/assets/icon/weixin-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="bottom_right">
        <div class="item" v-for="(item, index) in state.list" :key="item">
          <div class="item_name">{{ item.name }}</div>
          <div :class="index == 0 ? 'item_desc item_color' : 'item_desc'">
            {{ item.value }}
            <el-tooltip v-if="item.audit_message" class="box-item" effect="dark" :content="state.audit_message" placement="top">
              <el-icon style="color: #e3e3e3"><WarningFilled /></el-icon>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import useClipboard from 'vue-clipboard3'
  import { ElMessage } from 'element-plus'
  import { ref, defineExpose } from 'vue'
  const state = ref<any>({
    cust_info: {
      name: '',
      mobile: '',
      sex: 0,
      avatar: '',
      cust_weiwork: 2,
      cust_wechat: 2
    },
    list: []
  })
  const { toClipboard } = useClipboard()
  const onCopy = async () => {
    try {
      await toClipboard(state.value.order_no)
      ElMessage.success('复制成功')
    } catch (e) {
      ElMessage.error('复制失败')
    }
  }
  const onState = (v: any) => {
    console.log('onState')
    state.value = { ...v }
    state.value.cust_info = {
      name: v.cust_name || v.cust_nickname || v.cust_nickname || '--',
      mobile: v.cust_mobile || '--',
      sex: v.cust_sex,
      avatar: v.cust_avatr,
      cust_weiwork: v.cust_weiwork,
      cust_wechat: v.cust_wechat
    }
    state.value.list = [
      { name: '订单金额', value: `￥${v.order_amount}` },
      { name: '下单时间', value: v.created_at },
      { name: '关联商机', value: v.business_opportunity_name },
      { name: '归属员工', value: v.belong_uid_name || '--' },
      { name: '订单状态', value: v.pay_state_name || '--' },
      { name: '审核状态', value: v.state_name || '--', audit_message: v.audit_message }
    ]
  }
  defineExpose({
    onState
  })
</script>

<style lang="scss" scoped>
  .card {
    min-width: min-content;
    padding: 0 24px;
    margin-bottom: 16px;
    border: 1px solid #e4e7ed;
    background: #fff;
    font-family: PingFangSC-Medium, PingFang SC;
    .top {
      border-bottom: 1px solid #eaeaea;
      display: flex;
      justify-content: space-between;
      .top_left {
        height: 56px;
        display: flex;
        align-items: center;
        .code {
          height: 14px;
          margin-right: 6px;
          font-size: 16px;
          font-weight: 500;
          color: #33302d;
          line-height: 14px;
        }
        .copy {
          margin-right: 26px;
          cursor: pointer;
          color: #ff6b00;
        }
        .status {
          height: 20px;
          display: flex;
          align-items: center;
          padding: 0px 8px;
          border-radius: 2px;
          font-size: 12px;
          font-weight: 400;
        }
        .yes {
          background: #ebfff3;
          color: #59d2a0;
          border: 1px solid #bcf1d1;
        }
        .pending {
          background: #ebf0ff;
          border: 1px solid #bac9f2;
          color: #5a84f7;
        }
        .no {
          background: #fff1f1;
          border-radius: 2px;
          border: 1px solid #ffa4a5;
          color: #fe292b;
        }
      }
      .top_right {
        display: flex;
        align-items: center;
      }
    }
    .bottom {
      padding: 24px 0;
      display: flex;
      align-items: center;
      .bottom_left {
        max-width: 320px;
        padding-right: 5px;
        border-right: 1px solid #eaeaea;
        display: flex;
        .avatar {
          width: 64px;
          height: 64px;
          margin-right: 10px;
          border-radius: 7px;
        }
        .user {
          padding-top: 10px;
          .name_box {
            margin-bottom: 8px;
            display: flex;
            .name {
              max-width: 230px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              font-size: 20px;
              font-weight: 500;
              color: #33302d;
              line-height: 21px;
            }
            .men {
              color: #74ddf4;
            }
            .women {
              color: #f474bf;
            }
            img {
              width: 16px;
              height: 16px;
            }
          }
          .mobile {
            height: 14px;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #696969;
            line-height: 14px;
            display: flex;
            align-items: center;
            .weixin {
              width: 16px;
              height: 14px;
              margin-left: 3px;
            }
          }
          .mobile {
            margin-right: 12px;
          }
        }
      }
      .bottom_right {
        min-width: min-content;
        height: 50px;
        padding: 5px 20px;
        flex: 1;
        display: flex;
        justify-content: space-between;
        .item {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .item_name {
            height: 14px;
            font-size: 14px;
            font-weight: 300;
            color: #696969;
            line-height: 14px;
          }
          .item_desc {
            display: flex;
            font-size: 15px;
            font-weight: 500;
            color: #33302d;
          }
          .item_color {
            color: #ff6b00;
          }
        }
      }
    }
  }
</style>
